﻿
@{
    ViewBag.Title = "购物车";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <style>
        .order {
            width: 60%;
            padding: 0 20%;
        }

        .step {
            width: 100%;
            height: 60px;
        }

        .el-step__title.is-process, .is-text {
            color: #0c8ed9;
        }

        .el-step__head.is-process {
            border-color: #0c8ed9;
        }

        .header {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #fbfbfd;
            color: #999;
            font-size: 15px;
        }

        .on {
            background-color: #fbfbfd;
        }
    </style>
    <div id="app" style="min-height:680px">
        <div class="order">
            <div class="step">
                <div class="elStep">
                    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
                        <el-step title="1. 我的购物车"></el-step>
                        <el-step title="2. 核对购物信息"></el-step>
                        <el-step title="3. 提交订单成功"></el-step>
                    </el-steps>
                </div>
            </div>
            <div v-if="active==1">
                <el-table :data="tableData" style="width: 100%;font-size:14px;">
                    <el-table-column type="index" label="序号" width="60"> </el-table-column>
                    <el-table-column prop="MusicName" label="歌曲名"></el-table-column>
                    <el-table-column prop="SingerName" label="歌手"></el-table-column>
                    <el-table-column prop="MusicAblum" label="专辑"></el-table-column>
                    <el-table-column prop="MusicLong" label="时长"></el-table-column>
                    <el-table-column label="操作" width="80">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @@click="DeleteCar">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="height:60px; line-height:60px;margin-top:10px;">
                    <el-col :span="17">
                        共<span style="color:red;">1</span>张碟，时长<span style="color:red;">{{totalTime}}</span> <span style="color:#0c8ed9;">&nbsp; 注：时长超过70分钟将不能被刻录 </span>
                    </el-col>
                    <el-col :span="7">
                        <el-button :disabled="Buydisabled" type="primary" style="float:right;margin-right:10%;margin-top:10px" @@click="next">选择好了，核对订单</el-button>
                    </el-col>
                </el-row>
            </div>
            <div v-if="active==2">
                <el-row class="header">
                    <el-col :span="3" style="text-align:center">序号</el-col>
                    <el-col :span="5" style="text-align:center">歌名</el-col>
                    <el-col :span="5" style="text-align:center">歌手</el-col>
                    <el-col :span="5" style="text-align:center">专辑</el-col>
                    <el-col :span="3" style="text-align:center">时长</el-col>
                    <el-col :span="3" style="text-align:center">品质</el-col>
                </el-row>
                <el-row v-for="(item,index) in tableData" style="width:100%;height:40px;line-height:40px;font-size:13px" :class="{on:index%2!=0}">
                    <el-col :span="3" style="text-align:center">{{index+1}}</el-col>
                    <el-col :span="5" style="text-align:center">{{item.MusicName}}&nbsp;</el-col>
                    <el-col :span="5" style="text-align:center">{{item.SingerName}}&nbsp;</el-col>
                    <el-col :span="5" style="text-align:center">{{item.MusicAblum}}&nbsp;</el-col>
                    <el-col :span="3" style="text-align:center">{{item.MusicLong}}&nbsp;</el-col>
                    <el-col :span="3" style="text-align:center">
                        <font v-if="item.MusicBit=='128kbps'">
                            标准
                        </font>
                        <font v-if="item.MusicBit=='320kbps'">
                            无损
                        </font>
                    </el-col>
                </el-row>
                <el-row style="height:100px; margin:20px 0">
                    <el-col :span="4">
                        <el-button style="margin-right:20px;margin-top:10px" v-on:click="prev" v-if="active==2">上一步</el-button>
                    </el-col>
                    <el-col :span="16" style="text-align:right;">
                        <span style="color:#0c8ed9;">名称:</span>  <el-input v-model="userName" placeholder="输入你的名称" style="width:250px"></el-input>
                        <span style="color:#0c8ed9;">备注:</span>  <el-input type="textarea" v-model="note" style="width:250px"></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align:right;">
                        <el-button :disabled="getBuy" type="primary" style="float:right;margin-right:10%;margin-top:10px" v-on:click="nextTwo">提交订单</el-button>
                    </el-col>
                </el-row>              
            </div>
            <div v-if="active==3" style="height:40%;line-height:40px">
                <el-row>
                    <el-col :span="8">
                        <img src="~/Content/imgs/duihao.png" style="vertical-align:middle">

                    </el-col>
                    <el-col :span="16">
                        <h2>提交成功!</h2>
                        <p>订单密钥为:{{key}}&nbsp;&nbsp;&nbsp; <el-button type="text" @@click="copykey">复制密钥</el-button></p>
                        <p>请将密钥赋值给客服完成订单</p>
                        <p><br /><el-button typeo="primary">返回到首页，继续选择</el-button></p>
                    </el-col>
                </el-row>         
            </div>
        </div>
       
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    active: 1,
                    tableData: [],
                    totalTime: 0,
                    Buydisabled: true,
                    userName: '',
                    getBuy: true,
                    note: '',
                    key:'0000-0000-0000-0000-0000-0000',
                }
            },
            methods: {
                next() {
                    if (this.active++ > 2) this.active = 0;
                },
                nextTwo() {
                    axios.post("/Car/CustomerOrder", { 'CustomerName': this.userName, 'OrderNote': this.note, 'ids': this.tableData }).then(res => {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.key = res.data.key
                        if (this.active++ > 2) this.active = 0; 
                        localStorage.removeItem('BuyLists')
                    });
                },
                prev() {
                    --this.active;
                },
                searchKey() {
                    if (this.search == '' || this.search == null) {

                    } else {
                        location.href = '/Home/SearchMusic?keyWord=' + this.search
                    }
                },
                DeleteCar(index) { //删除行数
                    this.tableData.splice(index, 1)
                    localStorage.setItem('BuyLists', JSON.stringify(this.tableData))
                    this.CompateTime()          
                },
                CompateTime() {
                    var min = 0;
                    var sec = 0;
                    for (var i = 0; i < this.tableData.length; i++) {
                        min += parseInt(this.tableData[i].MusicLong);
                        sec += parseInt(this.tableData[i].MusicLong.substring(3));
                    }
                    var oth = parseInt(sec / 60);
                    var sec = sec % 60;
                    min += oth;
                    if (sec < 10) {
                        sec = "0" + sec;
                    }
                    this.totalTime = min + ':' + sec;
                },
                copykey() {
                    var key = this.key
                    const input = document.createElement('input')
                    document.body.appendChild(input)
                    input.setAttribute('value', key)
                    input.select()
                    document.execCommand("Copy");
                    document.body.removeChild(input)
                    this.$message({
                        message: '复制成功',
                        type: 'success'
                    });
                }
            },
            mounted() {
                setInterval(() => {  //创建定时器
                    var lists = JSON.parse(localStorage.getItem('BuyLists')) || []
                    this.tableData = lists
                    this.CompateTime()              
                }, 1000);              
            },
            watch: {
                totalTime: {
                    handler(newValue) {
                        var value = parseInt(newValue);
                        if (value > 0 && value < 70) {
                            this.Buydisabled = false;
                        } else {
                            this.Buydisabled = true;
                        }
                    }, deep: true
                },
                userName: {
                    handler(newValue) {
                        if (newValue != null && newValue != "") {
                            this.getBuy = false;
                        }
                    }, deep: true
                }
            }
        })
    </script>
